import React, { Component } from 'react'
import { ScrollView, Swiper, SwiperItem, Image, View, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { connect } from "react-redux"
import { chooseStore } from '@redux/actions'
import imgList from '@components/imgList'
import './index.scss'

class Park extends Component {
  constructor(props) {
    super(props)
    this.state = {
      adData: [
        {
          desc: '1',
          imgUrl: 'http://47.111.70.141:9021/file/downloadById?fileId=2015938959146684883'
        },{
          desc: '2',
          imgUrl: 'http://47.111.70.141:9021/file/downloadById?fileId=2015938959146684883'
        },{
          desc: '3',
          imgUrl: 'http://47.111.70.141:9021/file/downloadById?fileId=2015938959146684883'
        }
      ],
      status: {
        top: [{avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596476893669&di=bf3066b7e07df65405eaba2437b9c859&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F4fe12172fb0501b484baf8b84aa4bdf97f8b930212fa4-s1LS2W_fw658'},
        {avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1436978692,3313150225&fm=26&gp=0.jpg'},
        {avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2077094420,3445675687&fm=26&gp=0.jpg'},
        {avatar: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3553012206,743468474&fm=26&gp=0.jpg'},
        {avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596476992101&di=6037162d7e7d6fb3fb11fed2b8695d3c&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F1ffe5ee042474cfef0913da3eed26e4a56293f92f95d-Ewx9wz_fw658'}
      ],
        city: '南京',
        amount: 333
      },
      storeRecommend: [
        {
          name: '七号足球公园',
          addr: '秦淮区佳营中路与青松路交叉路北200米',
          location: '1.5km',
          tags: ['好停车', 'WIFI', '更衣室', '浴室室'],
          price: 20
        },
        {
          name: '金川足球公园',
          addr: '秦淮区佳营中路与青松路交叉路北200米',
          location: '1.5km',
          tags: ['好停车', 'WIFI', '更衣室', '浴室室','好停车', 'WIFI', '更衣室', '浴室室','好停车', 'WIFI', '更衣室', '浴室室'],
          price: 25
        },{
          name: '白马公园',
          addr: '秦淮区佳营中路与青松路交叉路北200米',
          location: '1.5km',
          tags: [],
          price: 20
        },{
          name: '金川足球公园',
          addr: '秦淮区佳营中路与青松路交叉路北200米',
          location: '1.5km',
          tags: [],
          price: 15
        }
      ]
    }
  }

  componentWillReceiveProps (nextProps) {
    console.log(this.props, nextProps)
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  /**
   * 发起活动
   */
  handleNewActivity = () =>{
    Taro.navigateTo({url: '../newActivity/index'})
  }

  /**
   * 门店选择
   */
  handleStoreSelect = (store) =>{
    if(this.props.chooseStore){
      this.props.chooseStore(store, 1)
    }
    Taro.navigateTo({url: '../gameTimes/index'})
  }


  render () {
    const { adData=[], storeRecommend=[],status={} } = this.state

    return (
      <ScrollView className='pageContent'
        enableFlex
        scrollY>
        <Swiper 
          className='AdSwiper'
          indicatorColor='rgba(255, 255, 255, 0.5)'
          indicatorActiveColor='rgba(255, 255, 255, 1)'
          circular
          indicatorDots
          autoplay>
          {
            adData.map( (item,index) => 
            <SwiperItem key={`banner${index}`}>
                <Image
                    className='bannerImg' mode='scaleToFill' src={item.imgUrl}
                    onClick={() => Taro.showToast({title: item.desc})}/>
            </SwiperItem>)
          }
        </Swiper>
        <View className='statusBar'>
          <View className='avatarList'>
            {
              status.top &&
              status.top.map((item, index) =>
                <View key={index} className='avatar'>
                  <Image src={item.avatar} mode='aspectFit'></Image>
                </View>
              )
            }
          </View>
          <View>
            <View className='status'>{`${status.city} ${status.amount}人`}</View>
            <View className='text'>正在参加小聚场</View>
          </View>
          <View className='btn' onClick={this.handleNewActivity}>发起活动</View>
        </View>
        <View className="filterBar">
          <View className="filterOption">全城<Image className='rightIcon' src={imgList.rightIcon}></Image></View>
          <View className="filterOption">综合排序<Image className='rightIcon' src={imgList.rightIcon}></Image></View>
          <View className="filterOption">筛选<Image className='rightIcon' src={imgList.rightIcon}></Image></View>
        </View>
        <View className='storeList'>
        {
            storeRecommend.map((store,index) => <View key={index} className='storeItem' onClick={() =>this.handleStoreSelect(store)}>
              <View className='name'>{store.name}</View>
              <View className='price'>人均<Text>{`  ¥${store.price}元起`}</Text></View>
              <View className='location'>
                <View className='addr'>{store.addr}</View>
                <View className='distince'>{store.location}</View>
              </View>
              {
                store.tags && <View className='tags'>
                  {
                    store.tags.map((tag,index) => <View key={index} className='tag'>{tag}</View>)
                  }
                </View>
              }
            </View>)
          }
        </View>
      </ScrollView>
    )
  }
}

export default connect(({}) => ({}), {chooseStore})(Park)

